<template>
	<view class="content" style="background-color: #fff;">
		<view class="top">
			<u-navbar scrollable=false :placeholder='true' bgColor="#ffffff" :autoBack="true" title="">
				<view slot="right" class="input_right flex relative">
					<u-input placeholder="请输入关键字" border='' customStyle="background-color: #f5f5f5;"
						 v-model="searchValue" @confirm="getList" :clearable='true' @clear='page=1;goodsList=[];getList()'>
						<template slot="suffix">
						 <!-- <u-icon name="camera" size="25" color="#666"></u-icon> -->
						</template>
					</u-input>
				</view>
			</u-navbar>
		</view>
		<view class="container">
			<view class="shop " style="padding: 0 4%;background-color: white;">
				<view class="flexJBC">
					<u-image :src="info.store_image" width='80rpx' height='80rpx'
						radius="8rpx" />
					<view class="" style="margin-left: 20rpx;flex: 1;">
						<view class="flexJBC " style="margin-bottom: 10rpx;">
							<view class="fontS28">
								{{info.store_name}}
							</view>
							<view class="cof" @click="store_follow"
								style="padding: 4rpx 16rpx;background-color:#DD2131 ;border-radius: 22rpx;">
								{{info.focus==1?'已关注':'+关注'}}
							</view> 
						</view>
						<view class="fontS24 flex ">
							<u-rate count="5" v-model="info.postage_score" :minCount="1" :readonly='true' activeColor='#FFA848' inactiveColor='rgba(255, 168, 72, 0.2) ' size='20rpx' gutter='1'></u-rate>
							<text style="color: #FFA848;margin-right: 30rpx;">{{info.postage_score}}分</text>
							<text class="co9">{{info.focus_number}}人关注</text>
						</view>
					</view>
				</view>
				
				<view class="mt24 "  @click="showCoupon=true" style="border: 1rpx solid #f5f5f5;border-radius: 20rpx;" v-if="copuonList.length>0">
					<view class="whiteBox" >
						<view class='flexJBC'>
							<view class="homeRed fontS24 elipes1" style="width: 80%;" >
								<text v-for="(item,index) in copuonList" :key="index" style="margin-right: 10rpx;">{{item.title}}</text>
							</view>
							<view class="fontS24 co3 flex"> 
								<text>领券</text>
								<u-icon name="arrow-right" color="#ccc" size="18rpx"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="mt32" style="margin-top: 30rpx;">
					<u-tabs activeStyle="color:#DD2131;font-size:32rpx" lineColor="#DD2131" lineHeight='4rpx'
						inactiveStyle='color:#999;font-size:32rpx'
						itemStyle="margin-bottom:16rpx;padding:0;font-size:32rpx;width:33%" :list="list1"
						@click="list1Click" ></u-tabs>
				</view>
			</view>
			<!-- 推荐 -->
			<view v-if="state==0">
				<view class="advt" style="margin-top: 20rpx;" v-if="swiperList.length>0">
					<u-swiper height="316rpx" radius="0rpx" keyName='image' :list="swiperList" >
					</u-swiper>
				</view>
				<view class="suggestBox" v-if="goodsList.length>0">
					<view class="suggest flexJBC">
						<text class="fontS32" >商品推荐</text> 
						<!-- <view class="flex" style="align-items: baseline;">
							<text class="fontS24 co9">更多</text>
							<u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
						</view> -->
					</view>
				</view>
			</view>
			<!-- 商品 -->
			<view v-if="state==1">
				<view class="bgf padding32" >
					<view class="all_top flex flexJBC fw5  " >
						<view class="li " v-for="(item,index) in List2" :class="" @click="list2Click(index)" :class="list2Active==index?'':'co9'">
							<view class="flex">
								<view class="">
									{{item.name}}
								</view>
								<view class="flexcenter" v-if="index==2">
									<u-icon name="arrow-up-fill" size="5rpx"  :color="priceasc=='asc'?'#333':'#999'" ></u-icon>
									<u-icon name="arrow-down-fill" size="5rpx" style='margin-top:10rpx;' :color="priceasc=='desc'?'#333':'#999'"></u-icon>
								</view>
								<image v-if="index==3" src="/static/images/search/shaixuan.png" mode="" style="width: 22rpx;height: 22rpx;"></image>
							</view>
						</view>
					</view>
					<view class="paddingLR32" style="margin-top: 50rpx;" v-if="showShaoxuan && list2Active==3">
						<view class="flex" > 
							<input type="text" placeholder="自定最低价" class=" fontS24  center" placeholder-class="co9" v-model="minPrice"
								style="border-radius: 8rpx; background-color:#f5f5f5;height:72rpx;width:248rpx;">
							<text style="margin: 0 20rpx ;" class="co9">——</text>
							<input type="text" placeholder="自定最高价" class="fontS24  center" placeholder-class="co9" v-model="maxPrice" 
							style="border-radius: 8rpx;background-color:#f5f5f5;height:72rpx;width:248rpx;">
						</view>
						<view class="all_btn flex">
							<button @click="minPrice='';maxPrice=''" >重置</button>
							<button @click="prcieShuaixuan">确认</button>
						</view>
					</view>
				</view>
				<view class="paddingLR32">
					<!-- <List :showTopTitle="false"  :list='goodsList' v-if="goodsList.length>0"/> -->
				</view>
			</view>
			<!-- 新品 -->
			<view  class="padding32" v-if="goodsList.length>0">
				<List :showTopTitle="false"  :list='goodsList' />
			</view>
		</view>
		<u-loading-page loading-text="loading..." v-if='pageLoading' :loading='true' bgColor='#f5f5f5'></u-loading-page>
		<view class="" style="min-height: 50vh;padding-top: 10vh;" v-if="loading || (goodsList.length==0 && !loading)">
			<u-loading-icon  mode="semicircle" v-if="loading" size='80rpx'></u-loading-icon>
			<u-empty v-if="goodsList.length==0 && !loading"></u-empty>
		</view>
		<Coupon :showCoupon='showCoupon' @showCouponClose='showCouponClose' :copuonList='copuonList'/>
	</view>
</template>
<script>
	import List from '@/componentes/list.vue'
	import Coupon from '@/componentes/coupon.vue'
	export default {
		data() {
			return {
				copuonList:[],//
				showCoupon:false,//优惠券弹窗
				loading:false,
				pageLoading:true,
				swiperList:[],
				priceasc:"",
				page:1,
				goodsList:[],//商品分类列表
				// tuijinaList:[],//推荐列表
				info:{},//店铺信息
				minPrice:'',//最小的价格
				maxPrice:'', //最大的价格
				showShaoxuan:false, //是否显示筛选弹窗
				radioValue:'',
				store_id:'',
				list2Active:0, //list2的当前选中
				searchValue: '',  //搜索关键字
				state: 0,  //0是推荐   1是商品    2是新品
				list1: [{ 
					name: '推荐',
				}, {
					name: '商品',
				}, {
					name: '新品'
				}],
				List2:[{
					name: '综合推荐',
				}, {
					name: '销量',
				}, {
					name: '价格'
				},{
					name: '筛选'
				}]
			}
		},
		components: {
			List,Coupon
		},
		onReachBottom() {
			this.page++;
			this.getList()
		},
		methods: {
			// 关闭优惠卷弹窗
			showCouponClose(val){
				this.showCoupon=val
				console.log(val)
			},
			getCouponList(val){
				this.$my.post('/index/coupon/get_coupon',{page:1,limit:100,mer_id:this.info.merchant_id,type:1}).then(res=>{
					if(res.code==200){
						this.copuonList=res.data
						this.copuonList.forEach(item=>{
							this.$set(item,'showInfo' ,false) //是否显示使用说明
						})
					}
				})
			},
			clear(e){
				console.log(e)
			},
			list2Click(index){
				this.list2Active=index;
				this.showShaoxuan=index==3;
				this.goodsList=[];
				this.page=1;
				this.getList()
			},
			getList(e){
				
				if(e){
					this.page=1;
					this.goodsList=[];
				}
			     this.loading=true;
				let info={}
				if(this.list2Active==0){
					info={is_good:1,}
				}else if(this.list2Active==1){
					info={sales:'desc',}
				}else if(this.list2Active==2){
					this.priceasc=this.priceasc=='desc'?'asc':'desc'
					info={price:this.priceasc,}
				}
				this.$my.post('/index/Search/searchStoreProduct',Object.assign(info,{store_id:this.store_id,page:this.page,limit:10,search_key:this.searchValue})).then(res=>{
					this.loading=false;
					if(res.code==200){
						this.goodsList=this.goodsList.concat(res.data.data)
					}
				})
			},
			// 价格筛选
			prcieShuaixuan(){
				// 
				this.goodsList=[];
				this.page=1;
				let	info={
					is_good:1,
					custom_price:this.minPrice+','+this.maxPrice
				}
				this.$my.post('/index/Search/searchStoreProduct',Object.assign(info,{store_id:this.store_id,page:this.page,limit:10,search_key:this.searchValue})).then(res=>{
					if(res.code==200){
						this.goodsList=this.goodsList.concat(res.data.data)
						this.showShaoxuan=false;
					}
				})
				
			},
			// 关注
			store_follow(){
				this.$my.post('/index/user/store_follow',{id:this.store_id,type:this.info.store_type==1?3:1,is_batch:0}).then(res=>{
					this.$my.toast(res.message)
					if(res.code==200){
						this.$my.post('/index/merchantStore/findStoreDetails',{id:this.store_id,}).then(res=>{
							if(res.code==200){
								this.info=res.data
							}
						})
					}
				})
			},
			change(e) {
				console.log('change', e);
			},
			// list1的点击事件
			list1Click(item) {
				let info={};
				this.loading=true;
				this.state = item.index;
				if(this.state==0){
					// 推荐
					info={is_good:1}
				}else if(this.state==1){
					// 商品 综合推荐
					info={is_good:1}
				}else if(this.state==2){
					// 新品
					info={is_new:1}
				}
				this.goodsList=[];
				this.page=1;
				this.$my.post('/index/Search/searchStoreProduct',Object.assign(info,{store_id:this.store_id,page:this.page,limit:10,search_key:this.searchValue})).then(res=>{
					this.loading=false
					if(res.code==200){
						this.goodsList=this.goodsList.concat(res.data.data)
					}
				})
			}

		},
		onLoad(option) {
			this.store_id=option.store_id?option.store_id:"2"
			this.$my.post('/index/merchantStore/findStoreDetails',{id:this.store_id,}).then(res=>{
				if(res.code==200){
					this.info=res.data
					this.getCouponList()
					this.info.store_banner.forEach(item=>{
						let img={image:item}
						this.swiperList.push(img)
					})
				}
			})
			this.$my.post('/index/Search/searchStoreProduct',{is_good:1,store_id:this.store_id,page:this.page,limit:10,}).then(res=>{
				this.pageLoading=false;
				if(res.code==200){
					this.goodsList=this.goodsList.concat(res.data.data)
				}
			})
			
		}
	}
</script>

<style lang="scss" scoped>
	.all_btn {
		width: 80%;
		margin:50rpx auto 0;
		>button {
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			color: $red;
			border: 2rpx solid $red;
			font-size: 24rpx;
			border-radius: 30rpx;
			background-color: white;
			border: 1rpx solid $red;
			&:first-child {
				color: #999999 !important;
				background-color: #fff !important;
				color: #333;
				border: 2rpx solid #999999;
			}
		}
	}
	/deep/ .u-tabs__wrapper__nav {
		// justify-content: space-between;
		// padding: 0 70rpx;
	}

	/deep/.input_right {
		width: 180%;
		// border: 1px solid red;
		height: 80rpx;
		background-color: white;
		box-sizing: border-box;
		padding: 0 20rpx;

	}

	/deep/.u-navbar__content__right {
		left: 8%;
	}
	.content {
		.top {
			margin-bottom: 20rpx;

			.top_left {
				margin-right: 20rpx;

			}
		}

		.container {
			background-color: rgb(245, 245, 245);

			.suggestBox {
				background: linear-gradient(#fff 0.1%, #f5f5f5 100%);
				padding: 32rpx 32rpx 0;
				box-sizing: border-box;
				.suggest {
					margin-bottom: 24rpx;
				}
			}

		}

	}
</style>
